<template>
    <div>
        <el-row>
            <el-col :span="12" class="col">
                <span>A列</span>
                <draggable v-model="list" chosenClass="chosen" group="name" animation="300" filter=".forbid" :move="onMove">
                    <transition-group>
                        <div class="dragItem" :id="item.name" v-for="(item, index) in list" :key="item.name">
                            <div>索引：{{ index }}</div>
                            <div class="name">姓名:<span>{{ item.name }}</span></div>
                            <div>年龄:{{ item.age }}</div>
                            <div>工作:{{ item.job }}</div>
                        </div>
                    </transition-group>
                </draggable>
            </el-col>
            <el-col :span="12" class="col">
                <span>B列</span>
                <draggable v-model="list2" chosenClass="chosen" group="name" animation="300">
                    <transition-group>
                        <div class="dragItem" v-for="(item, index) in list2" :key="item.name">
                            <div>索引：{{ index }}</div>
                            <div class="name">姓名:<span>{{ item.name }}</span></div>
                            <div>年龄:{{ item.age }}</div>
                            <div>工作:{{ item.job }}</div>
                        </div>
                    </transition-group>
                </draggable>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    components: {
        draggable: () => import("vuedraggable"),
    },
    data() {
        return {
            list: [
                { name: "tom", age: 18, job: "coding1" },
                { name: "bob", age: 19, job: "coding2" },
                { name: "jery", age: 20, job: "coding3" },
                { name: "jim", age: 21, job: "coding4" },
            ],
            list2: [
                { name: "tom2", age: 182, job: "coding12" },
                { name: "bob2", age: 192, job: "coding22" },
                { name: "jery2", age: 202, job: "coding32" },
                { name: "jim2", age: 212, job: "coding42" },
            ]
        }
    },
    methods: {
        //禁止拖动到id为1的对象
        onMove(e) {
            console.log(e);
            console.log(e.draggedContext.futureIndex);
            if (e.draggedContext.futureIndex <= 1) return false;
            return true;
        },
    }
}
</script>

<style lang="scss" scoped>
.col {
    &>div {
        min-height: 100px;
        border: 14px solid purple;
        border-radius: 4px;
    }
}

.dragItem {
    .name {
        font-weight: 600;

        span {
            color: red;
        }
    }

    border:1px solid blue;
    border-radius:4px;
    padding:4px;
    margin-bottom:8px;
}
</style>